<template>
  <div class="move-wrapper">
    <div
      v-show="!isNoDatas"
      :id="id"
      :style="{ height: height, width: width }"
    ></div>

    <div
      v-show="isNoDatas"
      style="
        position: absolute;
        left: 50%;
        top: 50%;
        tranform: translate(-50%, -50%);
      "
    >
      暂无数据
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
// import uuidv1 from 'uuid/v1'
export default {
  components: {},
  props: {
    // 图形宽度
    width: {
      type: String,
      default: "100%",
    },
    // 图形高度
    height: {
      type: String,
      default: "100%",
    },
    // 滚动条数
    moveLen: {
      type: Number,
      default: 8,
    },
    // 滚动速度
    speed: {
      type: Number,
      default: 2000,
    },
    // 是否高亮
    isHighlight: {
      type: Boolean,
      default: false,
    },
    noData: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      myChart: null, // 图表元素
      carouselTimer: null, // 轮播定时器
      highlightTimer: null, // 高亮定时器
      id: "", // 元素id
      dataLen: 0, // 数据长度
      start: 0, // 数据轮播开始索引
      end: 0, // 数据轮播结束索引
      highlightIndex: 0, // 高亮索引
      baseOptions: {},
      xData: [], //横轴的数据
      yData: [], //纵轴的数据'
      yDArr: [], //多系列时纵轴数据
      isArray: false,
      isNoDatas: false,
    };
  },
  created() {
    this.id = this.uuid(); // 保证id是唯一的
  },
  mounted() {
    // 1.加载图表元素
    this.myChart = echarts.init(document.getElementById(this.id));
  },
  activated() {},
  updated() {},
  methods: {
    initChart(baseOptions) {
      // 1. 清除轮播和高亮的定时器
      clearInterval(this.carouselTimer);
      clearInterval(this.highlightTimer);
      this.myChart.clear();
      // 2. 赋值
      this.baseOptions = baseOptions;
      this.xData = baseOptions.xAxis.data;
      this.isArray =
        Object.prototype.toString.call(this.baseOptions.series) ===
          "[object Array]" || false;
      this.yData = this.isArray ? [] : baseOptions.series.data;

      // 3.判断有没有实例化，如果没有就重新实例化图表
      if (!this.myChart) {
        this.myChart = echarts.init(document.getElementById(this.id));
      }
      // 4.获取数据的长度
      console.log("this.baseOptions", this.baseOptions);
      this.dataLen = this.baseOptions.series[0]
        ? this.baseOptions.series[0].data.length
        : this.baseOptions.series.data.length;

      // 5.重置数据
      this.start = 0;
      this.highlightIndex = 0;
      this.end = this.moveLen;

      // 6.判断是否需要滚动

      if (this.dataLen > this.moveLen) {
        this.carouselHandle();
      } else {
        this.myChart.setOption(baseOptions);
      }

      // 7.是否高亮
      if (this.isHighlight) {
        this.highlightHandle();
      }

      // 8.图表自适应
      window.addEventListener("resize", this.chartResize);
    },
    // 轮播方法
    carouselHandle() {
      // 复制公共横轴数据
      this.xData = this.xData.concat(this.xData);

      // 判断系列是数组还是对象，处理系列数据
      if (this.isArray) {
        // this.yDArr = []; // 多系列时系列的数据数组-2个系列就是2組
        this.baseOptions.series.forEach((item) => {
          this.yData.push(item.data.concat(item.data));
        });
        this.carouselTimerHandle();
        this.carouselTimer = setInterval(() => {
          this.carouselTimerHandle();
        }, this.speed);
      } else {
        this.yData = this.yData.concat(this.yData);
        this.carouselTimerHandle();
        this.carouselTimer = setInterval(this.carouselTimerHandle, this.speed);
      }
    },
    // 定时器轮播方法
    carouselTimerHandle() {
      // 将当前高亮的索引传递给父组件
      this.$emit("sendIndex", this.start);
      // 截取横轴数据
      const xD = this.xData.slice(this.start, this.end);
      // 判断系列是数据还是对象
      if (this.isArray) {
        let yD = []; // 多系列中每組数据中的数据
        this.yData.forEach((item, index) => {
          yD = item.slice(this.start, this.end); // 截取纵轴数据
          this.baseOptions.series[index]["data"] = yD; // 设置纵轴数据
        });
      } else {
        const yD = this.yData.slice(this.start, this.end); // 截取纵轴数据
        this.baseOptions.series.data = yD; // 设置纵轴数据
      }

      // 设置横轴配置
      this.baseOptions.xAxis.data = xD;
      // 循环轮播的界限判断
      if (this.start === this.dataLen) {
        this.start = 0;
        this.end = this.moveLen;
      }
      this.myChart.setOption(this.baseOptions);
      this.start++;
      this.end++;
    },
    // 高亮方法
    highlightHandle() {
      this.highlightTimerHandle();
      this.highlightTimer = setInterval(this.highlightTimerHandle, this.speed);
    },
    // 定时器高亮方法
    highlightTimerHandle(series) {
      // 将当前高亮的索引传递给父组件
      this.$emit("sendIndex", this.highlightIndex);
      if (this.myChart && this.myChart.dispatchAction) {
        // 判断系列是否是数组
        if (this.isArray) {
          const yDArr = []; // 多系列时系列的数据数组-2个系列就是2組
          this.baseOptions.series.forEach((item) => {
            yDArr.push(item.data.concat(item.data));
          });
          yDArr.forEach((item, index) => {
            this.myChart.dispatchAction({
              type: "downplay",
              seriesIndex: index,
            });
            this.myChart.dispatchAction({
              type: "highlight",
              seriesIndex: index,
              dataIndex: this.highlightIndex,
            });
          });
        } else {
          this.myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
          });
          this.myChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: this.highlightIndex,
          });
        }

        // 判断高亮的边界
        if (this.dataLen <= this.moveLen) {
          this.highlightIndex++;
          if (this.highlightIndex > this.dataLen - 1) {
            this.highlightIndex = 0;
          }
        } else {
          this.highlightIndex = 0;
        }
      }
    },
    showLoading() {
      this.myChart.showLoading(loading);
    },
    hideLoading() {
      this.myChart.hideLoading();
    },
    // 图表重绘方法
    chartResize() {
      this.myChart && this.myChart.resize();
    },
    uuid() {
      var str = "";
      var arr = [
        "0",
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "a",
        "b",
        "c",
        "d",
        "e",
        "f",
        "g",
        "h",
        "i",
        "j",
        "k",
        "l",
        "m",
        "n",
        "o",
        "p",
        "q",
        "r",
        "s",
        "t",
        "u",
        "v",
        "w",
        "x",
        "y",
        "z",
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
      ];
      var pos;
      // 随机产生
      for (var i = 0; i < 10; i++) {
        pos = Math.round(Math.random() * (arr.length - 1));
        str += arr[pos];
      }
      return str;
    },
  },
  computed: {},
  watch: {
    noData(val) {
      this.isNoDatas = val;
    },
  },
};
</script>
<style scoped>
.move-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>
